<template>
  <!-- button -->
  <el-button color="#4dcdef" style="margin-top: 1rem; width: 8rem;" @click="dialogVisible = true">
    <span class="button_text">修改头像</span>
  </el-button>

  <!-- dialog -->
  <el-dialog
    v-model="dialogVisible"
    title="更改头像"
    width="50%"
  >
    <!-- cut组件 -->
    <div class="photo-cut">
      <div class="left">
        <VueCropper
          class="cropper"
          ref="cropper"
          :autoCrop="true"
          :fixed="true"
          :fixedBox="false"
          :centerBox="true"
          :img="default_img"
          :outputSize="1"
          @realTime="preview"
        ></VueCropper>
        <div class="button">
          <el-button @click="rotatePicL">Roate Left</el-button>
          <el-button @click="rotatePicR">Roate Right</el-button>
        </div>
        <div class="button">
          <el-upload
            ref="upload"
            class="upload"
            :limit="1"
            :on-exceed="handleExceed"
            :on-change="getPic"
            :auto-upload="false"
          >
            <template #trigger>
              <el-button type="primary">上传图片</el-button>
            </template>
          </el-upload>
        </div>
      </div>
      <div class="center">
        <div class="photo-show">
          <div :style="previews.div" class="preview">
            <img :src="previews.url" :style="previews.img">
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper"
import { genFileId } from 'element-plus'
import { postPic } from '../api/api'
import { useStore } from '../stores'

// dialog显示
const dialogVisible = ref(false)

// 图片参数 // 初始参数从store获得，判空显示默认图片
const store = useStore()
const default_img = ref('/photo'+'/2023/01/18/63c7473e36505.jpg')
if (store.photo) {
  let user_img = store.photo.replace('http://pic.qcblog.cc/photo', '/photo')
  default_img.value = user_img
}

// 传出从图床获得的url
const emits = defineEmits(['outUrl'])

// 截图框dom
const cropper = ref()
// 获取截图后数据 并上传
const getCropperData = (fileName_) => {
  cropper.value.getCropBlob(data => {
    transToFile(data, fileName_, "image/jpeg").then(res => {
      postPic(res).then(response => {
        let resData = response.data
        console.log(resData.message)
        if (resData.status) {
          // 返回图片的链接
          let url = resData.data.links.url
          // emits出去
          emits('outUrl', url)
        }
      }).catch(error => {
        console.log(error)
      })
    })
  })
}
// 文件转换
const transToFile = async(blob, fileName, fileType) => {
  return new window.File([blob], fileName, {type: fileType})
}

// 预览
const previews = ref({})
const preview = (data) => {
  previews.value = data
}
// 选转
const rotatePicL = () => {
  cropper.value.rotateLeft()
}
const rotatePicR = () => {
  cropper.value.rotateRight()
}

//upload dom
const upload = ref()
const handleExceed = (files) => {
  upload.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  upload.value.handleStart(file)
}

// 上传文件名
const fileName = ref()
// 获取上传文件
const getPic = (uploadFile) => {
  // 获取文件
  let img = uploadFile.raw
  // 获取文件名
  fileName.value = img.name
  // 转换成url
  let imgBlob = URL.createObjectURL(img)
  // url赋值给截图框
  default_img.value = imgBlob
}

// 确认
const confirm = () => {
  getCropperData(fileName.value)
  dialogVisible.value = false
}
// 取消
const cancel = () => {
  dialogVisible.value = false
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.photo-cut {
  height: 100%;
  width: 100%;
  display: flex;
}
.left {
  height: 100%;
  width: 300px;
  display: flex;
  flex-direction: column;
}
.center {
  height: 100%;
  margin: 0 auto;
}
.photo-show {
  margin-top: 0px;
}
.button {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.upload {
  width: 100%;
}
.cropper {
  height: 300px;
  width: 300px;
}
.preview {
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #ccc;
  overflow: hidden;
}
.button_text {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
}
</style>